<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>paging</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            float: left;
        }
    </style>
</head>
<body>
<table class="tab">

</table>
<p>第<span class="p1"></span>页</p>
<p class="p2"></p>
<input type="button" class="firstpage" value="首页">
<input type="button" class="beforpage" value="上一页">
<div class="div1">

</div>
<input type="button" class="nextpage" value="下一页">
<input type="button" class="lastpage" value="末页">
<script>
    var size = 10;
    var lastpage = 0;
    var nextpage = 0;
    var beforpage = 0;
    window.onload=function () {
        $.ajax({
            url:"http://47.104.87.243:8081/allstu",
            type:"get",
            data:{
                page:1,
                size:size
            },
            success:function (re) {
                var sidTH = $("<th></th>").html("学号");
                var snameTH = $("<th></th>").html("姓名");
                var ageTH = $("<th></th>").html("年龄");
                var addressTH = $("<th></th>").html("住址");
                $("<tr></tr>").append(sidTH)
                    .append(snameTH)
                    .append(ageTH)
                    .append(addressTH)
                    .appendTo(".tab");
                for (var i = 0; i < re.list.length; i++) {
                    var sid = re.list[i].sid;
                    var sname = re.list[i].sname;
                    var age = re.list[i].age;
                    var address = re.list[i].address;
                    var sidTD = $("<td></td>").html(sid);
                    var snameTD = $("<td></td>").html(sname);
                    var ageTD = $("<td></td>").html(age);
                    var addressTD = $("<td></td>").html(address);
                    $("<tr></tr>").append(sidTD)
                        .append(snameTD)
                        .append(ageTD)
                        .append(addressTD)
                        .appendTo(".tab");
                }
                // $(".p1").html("第"+re.pageNum+"页");
                $(".p2").html("共"+re.pages+"页");
                $(".p1").html(re.pageNum);
                lastpage = re.pages;
                nextpage = re.nextPage;
                beforpage = re.prePage;
                // for (var i = 0; i < re.navigateNums.length; i++) {
                //     $("<button class='"+re.navigateNums[i]+"'>"+re.navigateNums[i]+"</button>")
                //         .appendTo(".div1");
                // }
            }

        })
    };
    $(".firstpage").click(function () {
        $(".tab").empty();
        $(".p1").empty();
        $.ajax({
            url: "http://47.104.87.243:8081/allstu",
            type: "get",
            data: {
                page: 1,
                size: size
            },
            success: function (re) {
                var sidTH = $("<th></th>").html("学号");
                var snameTH = $("<th></th>").html("姓名");
                var ageTH = $("<th></th>").html("年龄");
                var addressTH = $("<th></th>").html("住址");
                $("<tr></tr>").append(sidTH)
                    .append(snameTH)
                    .append(ageTH)
                    .append(addressTH)
                    .appendTo(".tab");
                for (var i = 0; i < re.list.length; i++) {
                    var sid = re.list[i].sid;
                    var sname = re.list[i].sname;
                    var age = re.list[i].age;
                    var address = re.list[i].address;
                    var sidTD = $("<td></td>").html(sid);
                    var snameTD = $("<td></td>").html(sname);
                    var ageTD = $("<td></td>").html(age);
                    var addressTD = $("<td></td>").html(address);
                    $("<tr></tr>").append(sidTD)
                        .append(snameTD)
                        .append(ageTD)
                        .append(addressTD)
                        .appendTo(".tab");
                }
                $(".p1").html(re.pageNum);
                lastpage = re.pages;
                nextpage = re.nextPage;
                beforpage = re.prePage;
            }
        })
    });
    $(".lastpage").click(function () {
        $(".tab").empty();
        $(".p1").empty();
        console.log(lastpage);
        $.ajax({
            url: "http://47.104.87.243:8081/allstu",
            type: "get",
            data: {
                page: lastpage,
                size: size
            },
            success: function (re) {
                var sidTH = $("<th></th>").html("学号");
                var snameTH = $("<th></th>").html("姓名");
                var ageTH = $("<th></th>").html("年龄");
                var addressTH = $("<th></th>").html("住址");
                $("<tr></tr>").append(sidTH)
                    .append(snameTH)
                    .append(ageTH)
                    .append(addressTH)
                    .appendTo(".tab");
                for (var i = 0; i < re.list.length; i++) {
                    var sid = re.list[i].sid;
                    var sname = re.list[i].sname;
                    var age = re.list[i].age;
                    var address = re.list[i].address;
                    var sidTD = $("<td></td>").html(sid);
                    var snameTD = $("<td></td>").html(sname);
                    var ageTD = $("<td></td>").html(age);
                    var addressTD = $("<td></td>").html(address);
                    $("<tr></tr>").append(sidTD)
                        .append(snameTD)
                        .append(ageTD)
                        .append(addressTD)
                        .appendTo(".tab");
                }
                $(".p1").html(re.pageNum);
                lastpage = re.pages;
                nextpage = re.nextPage;
                beforpage = re.prePage;
            }
        })
    });
    $(".beforpage").click(function () {
        $(".tab").empty();
        $(".p1").empty();
        console.log(beforpage);
        $.ajax({
            url: "http://47.104.87.243:8081/allstu",
            type: "get",
            data: {
                page: beforpage,
                size: size
            },
            success: function (re) {
                var sidTH = $("<th></th>").html("学号");
                var snameTH = $("<th></th>").html("姓名");
                var ageTH = $("<th></th>").html("年龄");
                var addressTH = $("<th></th>").html("住址");
                $("<tr></tr>").append(sidTH)
                    .append(snameTH)
                    .append(ageTH)
                    .append(addressTH)
                    .appendTo(".tab");
                for (var i = 0; i < re.list.length; i++) {
                    var sid = re.list[i].sid;
                    var sname = re.list[i].sname;
                    var age = re.list[i].age;
                    var address = re.list[i].address;
                    var sidTD = $("<td></td>").html(sid);
                    var snameTD = $("<td></td>").html(sname);
                    var ageTD = $("<td></td>").html(age);
                    var addressTD = $("<td></td>").html(address);
                    $("<tr></tr>").append(sidTD)
                        .append(snameTD)
                        .append(ageTD)
                        .append(addressTD)
                        .appendTo(".tab");
                }
                $(".p1").html(re.pageNum);
                lastpage = re.pages;
                nextpage = re.nextPage;
                beforpage = re.prePage;
            }
        })
    });
    $(".nextpage").click(function () {
        $(".tab").empty();
        $(".p1").empty();
        console.log(nextpage);
        $.ajax({
            url: "http://47.104.87.243:8081/allstu",
            type: "get",
            data: {
                page: nextpage,
                size: size
            },
            success: function (re) {
                var sidTH = $("<th></th>").html("学号");
                var snameTH = $("<th></th>").html("姓名");
                var ageTH = $("<th></th>").html("年龄");
                var addressTH = $("<th></th>").html("住址");
                $("<tr></tr>").append(sidTH)
                    .append(snameTH)
                    .append(ageTH)
                    .append(addressTH)
                    .appendTo(".tab");
                for (var i = 0; i < re.list.length; i++) {
                    var sid = re.list[i].sid;
                    var sname = re.list[i].sname;
                    var age = re.list[i].age;
                    var address = re.list[i].address;
                    var sidTD = $("<td></td>").html(sid);
                    var snameTD = $("<td></td>").html(sname);
                    var ageTD = $("<td></td>").html(age);
                    var addressTD = $("<td></td>").html(address);
                    $("<tr></tr>").append(sidTD)
                        .append(snameTD)
                        .append(ageTD)
                        .append(addressTD)
                        .appendTo(".tab");
                }
                $(".p1").html(re.pageNum);
                lastpage = re.pages;
                nextpage = re.nextPage;
                beforpage = re.prePage;
            }
        })
    });
</script>
</body>
</html>